<!doctype html>
<html ng-app="Demo">
<head>
    <meta charset="utf-8" />
    <title>
        Enable Animations Explicitly For A Performance Boost In AngularJS
    </title>
    <style>
        a[ ng-click ] {
            color: red ;
            cursor: pointer ;
            text-decoration: underline ;
            user-select: none ;
            -moz-user-select: none ;
            -webkit-user-select: none ;
        }
        .animate-repeat {
             /*box-sizing:border-box;*/
             -webkit-transition: 1s linear all;
             transition: 1s linear all;
         }
        .animate-repeat.ng-move,
        .animate-repeat.ng-enter,
        .animate-repeat.ng-leave {
            -webkit-transition:all linear 0.5s;
            transition:all linear 0.5s;
        }.animate-repeat.ng-leave.ng-leave-active,
         .animate-repeat.ng-move,
         .animate-repeat.ng-enter {
             opacity:0;
             max-height:0;
         }

        .animate-repeat.ng-leave,
        .animate-repeat.ng-move.ng-move-active,
        .animate-repeat.ng-enter.ng-enter-active {
            opacity:1;
            max-height:40px;
        }

        /**
         * Stagger Leave (hide) animation
         */
        .animate-repeat.ng-leave-stagger {
            /* this will have a 100ms delay between each successive leave animation */
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;

            /* in case the stagger doesn't work then these two values
             must be set to 0 to avoid an accidental CSS inheritance */
            -webkit-transition-duration: 0s;
            transition-duration: 0s;
        }

        /**
         * Stagger ENTER ANIMATION
         */
        .animate-repeat.ng-enter-stagger {
            /* this will have a 100ms delay between each successive enter animation */
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;

            /* in case the stagger doesn't work then these two values
             must be set to 0 to avoid an accidental CSS inheritance */
            -webkit-transition-duration: 0s;
            transition-duration: 0s;
        }
    </style>
</head>
<body ng-controller="AppController">
<h1>
    Enable Animations Explicitly For A Performance Boost In AngularJS
</h1>
<p>
    <a ng-click="showListA()">Show List A</a>
    &mdash;
    <a ng-click="showListB()">Show List B</a>
    &mdash;
    <a ng-click="showListC()">Show List C</a>
</p>
<ul class="example-animate-container">
    <!--
        We are going to be swapping the "activeList" reference to point
        to either listA or listB. When we do this, ngRepeat will perform
        structural changes on the DOM (Document Object Model). And, as it
        does this, it will use $animate() service to transition the DOM
        elements, which will do two things:
        * Check to see if "leave" elements need to be animated.
        * Check to see if "enter" elements need to be animated.
        This behavior can be altered with the $animateProvider.
    -->
    <li ng-repeat="item in activeList" class="{{animateClass}}">
        {{ item }}
    </li>
</ul>
<!-- Load scripts. -->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<script type="text/javascript">
    // Create an application module for our demo.
    angular.module( "Demo", [ "ngAnimate" ] );
    // --------------------------------------------------------------------------- //
    // --------------------------------------------------------------------------- //
    // I configure the $animate service during bootstrap.
    angular.module( "Demo" ).config(
        function configureAnimate( $animateProvider ) {
            $animateProvider.classNameFilter( /\banimate/ );
        }
    );
    // --------------------------------------------------------------------------- //
    // --------------------------------------------------------------------------- //
    // I control the root of the application.
    angular.module( "Demo" ).controller(
        "AppController",
        function AppController( $scope ) {
            $scope.animateClass="animate-repeat";
            // These are the lists we will be swapping in / out.
            var listA = generateListItems( "A", 10 );
            var listB = generateListItems( "B", 10 );
            var listC = generateListItems( "C", 10 );
            // I hold the reference to the currently selected list.
            $scope.activeList = listA;
            // ---
            // PUBLIC METHODS.
            // ---
            // I select list A as the active list.
            $scope.showListA = function() {
                $scope.animateClass="animate-repeat";
                $scope.activeList = listA;
            };
            // I select list B as the active list.
            $scope.showListB = function() {
                $scope.animateClass="animate-repeat";
                $scope.activeList = listB;
            };
            // I select list B as the active list.
            $scope.showListC = function() {
                $scope.animateClass="animate-repeat1";
                $scope.activeList = listC;
            };
            // ---
            // PRIVATE METHODS.
            // ---
            // I generate a plain-text list with the given count.
            function generateListItems( suffix, count ) {
                var list = [];
                for ( var i = 1 ; i <= count ; i++ ) {
                    list.push( "List item " + i + " for " + suffix + "." );
                }
                return( list );
            }
        }
    );
</script>

</body>
</html>